<?php
// 初始化Session（必须放在页面最顶部）
session_start();
$userName = $_SESSION['user_name'] ?? '';
$isLogin = !empty($userName);
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FitPeak - 全部健身动作</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            fitness: '#FF6B6B',
            nutrition: '#36D399',
            community: '#9333EA',
            profile: '#06B6D4'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-custom {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .card-hover {
        @apply hover:shadow-xl hover:-translate-y-1 transition-custom;
      }
    }
  </style>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      scroll-behavior: smooth;
    }
    .slide-in {
      animation: slideIn 0.5s ease forwards;
    }
    @keyframes slideIn {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    .nav-scrolled {
      @apply bg-white shadow-md;
    }
    /* 统一图片样式 */
    .fitness-img {
      @apply w-full h-full object-cover rounded-lg shadow-sm;
    }
    /* 卡片内图片容器（新增，控制图片区域的尺寸） */
    .card-img-container {
       @apply relative h-48 overflow-hidden; /* 固定图片区域高度，超出部分隐藏 */
    }
    /* 分页激活状态样式 */
    .page-active {
      @apply bg-fitness text-white font-medium;
    }
    /* 筛选按钮激活样式 */
    .filter-active {
      @apply bg-fitness text-white;
    }
  </style>
</head>
<body class="bg-gray-50 text-dark">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-custom bg-white shadow-sm">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <a href="home.php" class="flex items-center">
        <div class="text-2xl font-bold text-primary">FitPeak</div>
      </a>
      <nav class="flex items-center space-x-8">
        <a href="home.php#fitness" class="font-medium text-fitness border-b-2 border-fitness pb-1 flex items-center">
          <i class="fa fa-dumbbell mr-1"></i> 健身动作
        </a>
        <a href="home.php#nutrition" class="font-medium text-dark hover:text-nutrition transition-custom flex items-center">
          <i class="fa fa-utensils mr-1"></i> 饮食搭配
        </a>
        <a href="home.php#community" class="font-medium text-dark hover:text-community transition-custom flex items-center">
          <i class="fa fa-users mr-1"></i> 用户社区
        </a>
        <a href="profile.php" class="font-medium text-dark hover:text-profile transition-custom flex items-center">
          <i class="fa fa-user-circle mr-1"></i> 个人中心
        </a>
      </nav>
      <div class="flex items-center space-x-4">
        <?php if ($isLogin): ?>
          <span class="text-sm font-medium text-gray-800">欢迎，<?php echo htmlspecialchars($userName); ?></span>
          <a href="profile.php" class="text-sm font-medium text-primary hover:underline transition-custom">个人中心</a>
          <a href="logout.php" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 transition-custom">退出</a>
        <?php else: ?>
          <a href="index.php" class="text-sm font-medium hover:text-primary transition-custom">登录</a>
          <a href="index.php" class="px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-custom">注册</a>
        <?php endif; ?>
      </div>
    </div>
  </header>

  <!-- 页面标题区 -->
  <section class="pt-24 pb-8 bg-gradient-to-b from-fitness/5 to-white">
    <div class="container mx-auto px-4">
      <div class="slide-in">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-fitness mb-2">全部健身动作</h1>
        <p class="text-gray-600">按部位分类，覆盖新手到进阶，找到适合你的专属训练</p>
      </div>
    </div>
  </section>

  <!-- 动作分类筛选（添加筛选标识和点击事件） -->
  <section class="py-6 bg-white border-b border-gray-200">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap gap-3 slide-in" style="animation-delay: 0.1s">
        <button class="px-4 py-2 rounded-full text-sm font-medium transition-custom filter-active" data-filter="all">全部动作</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom" data-filter="chest">胸肌</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom" data-filter="back">背部</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom" data-filter="arm">手臂</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom" data-filter="leg">腿部</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom" data-filter="core">核心</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom" data-filter="shoulder">肩部</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom" data-filter="full">全身</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom" data-filter="beginner">新手友好</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom" data-filter="advanced">进阶强化</button>
      </div>
    </div>
  </section>

  <!-- 健身动作列表（核心区域，添加分类标识） -->
  <section class="py-12 bg-gray-50">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-3 gap-8" id="fitness-card-container">
        <!-- 动作卡片1 - 胸肌类（添加data-category标识，优化图片贴合度） -->
      <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover slide-in" data-category="chest beginner" style="animation-delay: 0.2s">
         <!-- 新增图片容器，固定尺寸并隐藏溢出部分 -->
      <div class="relative card-img-container">
         <!-- 图片样式优化：填充容器、保持比例、无变形 -->
      <img src="images/标准俯卧撑.png" alt="标准俯卧撑" class="fitness-img">
      <div class="absolute top-3 right-3 bg-fitness/90 text-white text-xs px-2 py-1 rounded">新手友好</div>
    </div>
      <div class="p-5">
      <h3 class="text-xl font-bold mb-2">标准俯卧撑</h3>
      <div class="flex items-center text-sm text-gray-500 mb-3">
      <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 胸肌</span>
      <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 3组×15次</span>
    </div>
    <p class="text-gray-600 text-sm mb-4">锻炼胸肌、三角肌前束，无需器械，适合所有阶段用户，有效提升上肢推力</p>
    <a href="fitness-detail.php" class="inline-flex items-center text-fitness font-medium hover:underline">
      查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
    </a>
  </div>
</div>

        <!-- 动作卡片2 - 背部类（添加data-category标识，优化图片贴合度） -->
  <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover slide-in" data-category="back advanced" style="animation-delay: 0.3s">
  <!-- 新增图片容器，统一图片区域尺寸 -->
    <div class="relative card-img-container">
    <img src="images/罗马尼亚硬拉.png" alt="罗马尼亚硬拉" class="fitness-img">
    <div class="absolute top-3 right-3 bg-secondary/90 text-white text-xs px-2 py-1 rounded">进阶</div>
  </div>
  <div class="p-5">
    <h3 class="text-xl font-bold mb-2">罗马尼亚硬拉</h3>
    <div class="flex items-center text-sm text-gray-500 mb-3">
      <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 背部</span>
      <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 4组×12次</span>
   </div>
    <p class="text-gray-600 text-sm mb-4">强化下背部、臀部和腿部后侧，需杠铃或哑铃辅助，提升核心稳定性</p>
    <a href="fitness-detail.php" class="inline-flex items-center text-fitness font-medium hover:underline">
      查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
    </a>
  </div>
</div>

        <!-- 动作卡片3 - 核心类（添加data-category标识，优化图片贴合度） -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover slide-in" data-category="core beginner" style="animation-delay: 0.4s">
  <!-- 替换为图片容器类，统一尺寸 -->
    <div class="relative card-img-container">
    <img src="images/平板支撑.png" alt="平板支撑" class="fitness-img">
    <div class="absolute top-3 right-3 bg-fitness/90 text-white text-xs px-2 py-1 rounded">新手友好</div>
  </div>
  <div class="p-5">
    <h3 class="text-xl font-bold mb-2">平板支撑</h3>
    <div class="flex items-center text-sm text-gray-500 mb-3">
      <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 核心</span>
      <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 3组×60秒</span>
    </div>
    <p class="text-gray-600 text-sm mb-4">锻炼腹直肌、腹斜肌和核心稳定性，零器械高效训练，改善体态</p>
    <a href="fitness-detail.php" class="inline-flex items-center text-fitness font-medium hover:underline">
      查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
    </a>
  </div>
</div>

        <!-- 动作卡片4 - 手臂类（添加data-category标识，优化图片贴合度） -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover slide-in" data-category="arm beginner" style="animation-delay: 0.5s">
  <!-- 应用统一图片容器类 -->
    <div class="relative card-img-container">
    <img src="images/哑铃弯举.png" alt="哑铃弯举" class="fitness-img">
    <div class="absolute top-3 right-3 bg-fitness/90 text-white text-xs px-2 py-1 rounded">新手友好</div>
  </div>
  <div class="p-5">
    <h3 class="text-xl font-bold mb-2">哑铃弯举</h3>
    <div class="flex items-center text-sm text-gray-500 mb-3">
      <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 手臂</span>
      <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 4组×12次</span>
    </div>
    <p class="text-gray-600 text-sm mb-4">针对性锻炼肱二头肌，塑造手臂线条，可根据自身力量调整哑铃重量</p>
    <a href="fitness-detail.php" class="inline-flex items-center text-fitness font-medium hover:underline">
      查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
    </a>
  </div>
</div>

        <!-- 动作卡片5 - 腿部类（添加data-category标识，优化图片贴合度） -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover slide-in" data-category="leg beginner" style="animation-delay: 0.6s">
  <!-- 应用统一图片容器类，固定图片区域尺寸 -->
    <div class="relative card-img-container">
    <img src="images/标准深蹲.png" alt="标准深蹲" class="fitness-img">
    <div class="absolute top-3 right-3 bg-fitness/90 text-white text-xs px-2 py-1 rounded">新手友好</div>
  </div>
  <div class="p-5">
    <h3 class="text-xl font-bold mb-2">标准深蹲</h3>
    <div class="flex items-center text-sm text-gray-500 mb-3">
      <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 腿部</span>
      <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 3组×15次</span>
    </div>
    <p class="text-gray-600 text-sm mb-4">锻炼大腿股四头肌、臀部，提升下肢力量，无器械即可完成，基础必备动作</p>
    <a href="fitness-detail.php" class="inline-flex items-center text-fitness font-medium hover:underline">
      查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
    </a>
  </div>
</div>

        <!-- 动作卡片6 - 肩部类（添加data-category标识，优化图片贴合度） -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover slide-in" data-category="shoulder advanced" style="animation-delay: 0.7s">
  <!-- 应用统一图片容器类，固定尺寸并优化贴合度 -->
    <div class="relative card-img-container">
    <img src="images/哑铃肩推.png" alt="哑铃肩推" class="fitness-img">
    <div class="absolute top-3 right-3 bg-secondary/90 text-white text-xs px-2 py-1 rounded">进阶</div>
  </div>
  <div class="p-5">
    <h3 class="text-xl font-bold mb-2">哑铃肩推</h3>
    <div class="flex items-center text-sm text-gray-500 mb-3">
      <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 肩部</span>
      <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 4组×10次</span>
    </div>
    <p class="text-gray-600 text-sm mb-4">全面锻炼三角肌前束、中束，提升肩部宽度和力量，需哑铃或杠铃辅助</p>
    <a href="fitness-detail.php" class="inline-flex items-center text-fitness font-medium hover:underline">
      查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
    </a>
  </div>
</div>

        <!-- 动作卡片7 - 全身类（优化图片贴合度） -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover slide-in" data-category="full beginner" style="animation-delay: 0.8s">
  <!-- 应用统一图片容器类，确保尺寸一致 -->
    <div class="relative card-img-container">
    <img src="images/波比跳.png" alt="波比跳" class="fitness-img">
    <div class="absolute top-3 right-3 bg-fitness/90 text-white text-xs px-2 py-1 rounded">新手友好</div>
  </div>
  <div class="p-5">
    <h3 class="text-xl font-bold mb-2">波比跳</h3>
    <div class="flex items-center text-sm text-gray-500 mb-3">
      <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 全身</span>
      <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 3组×10次</span>
    </div>
    <p class="text-gray-600 text-sm mb-4">全身燃脂神器，结合深蹲、俯卧撑、跳跃，无需器械，高效提升心肺功能</p>
    <a href="fitness-detail.php" class="inline-flex items-center text-fitness font-medium hover:underline">
      查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
    </a>
  </div>
</div>

        <!-- 动作卡片8 - 胸肌进阶类（新增，优化图片贴合度） -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover slide-in" data-category="chest advanced" style="animation-delay: 0.9s">
  <!-- 应用统一图片容器类，固定尺寸并优化贴合度 -->
    <div class="relative card-img-container">
    <img src="images/双杠臂屈伸.png" alt="双杠臂屈伸" class="fitness-img">
    <div class="absolute top-3 right-3 bg-secondary/90 text-white text-xs px-2 py-1 rounded">进阶</div>
  </div>
  <div class="p-5">
    <h3 class="text-xl font-bold mb-2">双杠臂屈伸</h3>
    <div class="flex items-center text-sm text-gray-500 mb-3">
      <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 胸肌</span>
      <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 4组×12次</span>
    </div>
    <p class="text-gray-600 text-sm mb-4">强化胸肌下沿和肱三头肌，需双杠辅助，进阶胸肌训练必备动作</p>
    <a href="fitness-detail.php" class="inline-flex items-center text-fitness font-medium hover:underline">
      查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
    </a>
  </div>
</div>

        <!-- 动作卡片9 - 腿部进阶类（新增，优化图片贴合度） -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover slide-in" data-category="leg advanced" style="animation-delay: 1.0s">
  <!-- 应用统一图片容器类，固定尺寸并优化贴合度 -->
  <div class="relative card-img-container">
    <img src="images/弓步蹲.png" alt="弓步蹲" class="fitness-img">
    <div class="absolute top-3 right-3 bg-secondary/90 text-white text-xs px-2 py-1 rounded">进阶</div>
  </div>
  <div class="p-5">
    <h3 class="text-xl font-bold mb-2">弓步蹲</h3>
    <div class="flex items-center text-sm text-gray-500 mb-3">
      <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 腿部</span>
      <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 3组×10次/侧</span>
    </div>
    <p class="text-gray-600 text-sm mb-4">锻炼大腿前侧、后侧及臀部，提升下肢稳定性，可加哑铃增加强度</p>
    <a href="fitness-detail.php" class="inline-flex items-center text-fitness font-medium hover:underline">
      查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
    </a>
  </div>
</div>
      </div>

      <!-- 分页控件 (暂时注释)
      <div class="flex justify-center mt-12 slide-in" style="animation-delay: 1.1s">
        <nav class="flex items-center space-x-2">
          <a href="#" class="w-10 h-10 flex items-center justify-center border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-custom">上一页</a>
          <a href="#" class="w-10 h-10 flex items-center justify-center border border-gray-300 rounded-lg page-active">1</a>
          <a href="#" class="w-10 h-10 flex items-center justify-center border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-custom">2</a>
          <a href="#" class="w-10 h-10 flex items-center justify-center border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-custom">3</a>
          <span class="text-gray-400">...</span>
          <a href="#" class="w-10 h-10 flex items-center justify-center border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-custom">8</a>
          <a href="#" class="w-10 h-10 flex items-center justify-center border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-custom">下一页</a>
        </nav>
      </div>
    </div>
  </section>-->

  <!-- 底部区域 -->
  <footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-4 gap-8">
        <div>
          <div class="text-2xl font-bold mb-4">FitPeak</div>
          <p class="text-gray-400 text-sm">专业的健身饮食平台，助力你的健康生活</p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-gray-400 hover:text-white transition-custom"><i class="fa fa-weibo"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-custom"><i class="fa fa-weixin"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-custom"><i class="fa fa-instagram"></i></a>
          </div>
        </div>
        <div>
          <h3 class="text-lg font-medium mb-4">快速链接</h3>
          <ul class="space-y-2 text-sm text-gray-400">
            <li><a href="#" class="hover:text-white transition-custom">关于我们</a></li>
            <li><a href="#" class="hover:text-white transition-custom">健身指南</a></li>
            <li><a href="#" class="hover:text-white transition-custom">饮食知识</a></li>
            <li><a href="#" class="hover:text-white transition-custom">常见问题</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-medium mb-4">功能模块</h3>
          <ul class="space-y-2 text-sm text-gray-400">
            <li><a href="fitness-all.php" class="hover:text-white transition-custom">健身动作</a></li>
            <li><a href="home.php#nutrition" class="hover:text-white transition-custom">饮食搭配</a></li>
            <li><a href="home.php#community" class="hover:text-white transition-custom">用户社区</a></li>
            <li><a href="calorie-calculator.php" class="hover:text-white transition-custom">热量计算</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-medium mb-4">联系我们</h3>
          <ul class="space-y-2 text-sm text-gray-400">
            <li class="flex items-center"><i class="fa fa-envelope-o mr-2"></i> contact@fitpeak.com</li>
            <li class="flex items-center"><i class="fa fa-phone mr-2"></i> 400-123-4567</li>
            <li class="flex items-center"><i class="fa fa-map-marker mr-2"></i> 北京市朝阳区健身大厦</li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-500">
        &copy; 2023 FitPeak 健身饮食平台 版权所有
      </div>
    </div>
  </footer>

  <!-- 导航栏滚动监听 + 分类筛选功能脚本 -->
  <script>
    // 导航栏滚动效果（原有）
    window.addEventListener('scroll', () => {
      const navbar = document.getElementById('navbar');
      if (window.scrollY > 50) {
        navbar.classList.add('nav-scrolled');
      } else {
        navbar.classList.remove('nav-scrolled');
      }
    });

    // 分类筛选功能（新增）
    document.addEventListener('DOMContentLoaded', () => {
      const filterButtons = document.querySelectorAll('[data-filter]');
      const fitnessCards = document.querySelectorAll('[data-category]');

      filterButtons.forEach(button => {
        button.addEventListener('click', () => {
          // 1. 切换按钮激活样式
          filterButtons.forEach(btn => {
            btn.classList.remove('filter-active');
            btn.classList.add('bg-gray-100', 'text-gray-700');
          });
          button.classList.add('filter-active');
          button.classList.remove('bg-gray-100', 'text-gray-700');

          // 2. 筛选卡片（支持多分类标识匹配，如同时匹配"chest"和"beginner"）
          const filterValue = button.getAttribute('data-filter');
          fitnessCards.forEach(card => {
            const cardCategories = card.getAttribute('data-category').split(' ');
            if (filterValue === 'all' || cardCategories.includes(filterValue)) {
              card.style.display = 'block';
              // 重新触发动画（优化体验）
              card.classList.remove('slide-in');
              void card.offsetWidth; // 强制重绘
              card.classList.add('slide-in');
            } else {
              card.style.display = 'none';
            }
          });
        });
      });
    });
  </script>
</body>
</html>